<template>
  <div style="
    background-color: #fff;
  " >
    <navbar :title="$t('cos_app_status')"></navbar>
    <div style="height:56px"></div>
    <div style="padding:20px 15px 0">
      <!-- 我的状态 -->
      <div >
        <p class="category1 fontWeight600" style="padding-top:0;margin-left: 10px;font-size: 15px;">{{$t('cos_app_myStatus')}}</p>
        <van-row type="flex" justify="space-around">
            <van-col span="11" class="detail-col">
              <div class="pd8">
                <span class="title-value process fontWeight600" v-if="my_state.courseStatus=== 'Pending'" style="color:#00ba5f">{{ $t('cos_app_pending')}}</span>
                <span class="title-value color666 fontWeight600" v-else-if="my_state.courseStatus === null" style="color: #666666">{{$t('cos_time_not_start')}}</span>
                <span class="title-value process fontWeight600" v-else-if="my_state.courseStatus === 'I'" style="color:#00ba5f">{{ $t('doing')}}</span>
                <span class="title-value complete fontWeight600" v-else-if="my_state.courseStatus === 'C'">{{ $t('completed')}}</span>
                <span class="title-value color666 fontWeight600" v-else-if="my_state.courseStatus === 'W'" style="color: #666666">{{ $t('course_rl_9')}}</span>
                <span class="title-value color666 fontWeight600"  v-else-if="my_state.courseStatus === 'F'" style="color: #666666">{{ $t('cos_app_fail')}}</span>
                <p class="color999" style="margin-top: 10px;">{{$t('cos_app_myStatus')}}</p>
              </div>
            </van-col>
            <van-col span="11" class="detail-col">
              <div class="pd8">
                <p class="fontWeight600" style="color:#1A1A1A;">{{my_state.totalTime?my_state.totalTime:'--'}}</p>
                <p class="color999" style="margin-top: 10px;">{{$t('cos_app_lengthofstudy')}}</p>
              </div>
            </van-col>
        </van-row>
        <van-row type="flex" justify="space-around">
            <van-col span="11" class="detail-col">
              <div class="pd8">
                <p class="fontWeight600">{{my_state.passScore}}</p>
                <p class="color999" style="margin-top: 10px;">{{$t('required_scores')}}</p>
              </div>
            </van-col>
            <van-col span="11" class="detail-col">
              <div class="pd8">
                <p class="fontWeight600" style="color:#075ebb">{{my_state.courseScore}}</p>
                <p class="color999" style="margin-top: 10px;">{{$t('cos_total_score_course')}}</p>
              </div>
            </van-col>
        </van-row>
      </div>
      <!-- 模块学习要求 -->
      <div>
        <p class="category fontWeight600">{{$t('cos_app_moduleRequir')}}</p>
        <p class="describe">{{$t('must_learn_modules')}}</p>
        <van-row type="flex" justify="space-around" v-for="(item,index) in learner_record" :key="'learner_record'+index">
            <van-col span="23" class="detail-col">
              <div class="flex-between learn-status" style="padding:10px">
                <p class="color333">{{item.resTitle}}</p>
                <div class="accTitle-right fontWeight600" v-if="item.claimCondition !== 'UNLIMITED'">
                  <span v-if="item.modType === 'ASS' || item.modType === 'ACE' || item.modType === 'TST' || item.modType === 'DXT'">{{item.claimCondition === 'IFCP' ? $t('button_submit') : $t('cos_app_pass')}}/</span>
                  <span v-else>{{item.claimCondition === 'IFCP' ? $t('cos_app_checked') : $t('group_complete')}}/</span>
                  <span v-if="item.isMeet" class="completed" style="color:#075ebb">{{$t('cos_app_satisfied')}}</span>
                  <span v-else class="uncompleted" style="color:#FB6D0E">{{$t('cos_app_unsatisfied')}}</span>
                </div>
                <div class="accTitle-right fontWeight600" v-else >
                  <span style="color:#666666">{{$t('cos_app_noNeed')}}</span>
                </div>
              </div>
            </van-col>
        </van-row>
        <van-row type="flex" justify="space-around" v-for="(item,index) in my_state.scoreRecordList" :key="'my_state.scoreRecordList'+index">
            <van-col span="23" class="detail-col">
              <div class="flex-between learn-status" style="padding:10px">
                <p class="color333">{{item.resTitle}}</p>
                <div class="accTitle-right fontWeight600" v-if="item.cmtStatus !== 'UNLIMITED' && item.cmtStatus !== null">
                  <span>{{item.cmtStatus === 'IFCP' ? $t('need_submit') : $t('cos_app_pass')}}/</span>
                  <span v-if="item.isMeet" class="completed" style="color:#075ebb">{{$t('cos_app_satisfied')}}</span>
                  <span v-else class="uncompleted" style="color:#FB6D0E">{{$t('cos_app_unsatisfied')}}</span>
                </div>
                <div class="accTitle-right fontWeight600" v-else>
                  <span style="color:#666666">{{$t('cos_app_noNeed')}}</span>
                </div>
              </div>
            </van-col>
        </van-row>
      </div>
      <!-- 课程成绩 -->
      <div>
        <p class="category fontWeight600">{{$t('course_grade')}}</p>
        <p class="describe">{{$t('course_score_tips')}}</p>
        <van-row type="flex" justify="space-around">
          <van-col span="23" class="detail-col">
              <div class="flex-between learn-status" style="padding:10px">
                <p class="color333">
                  <span>{{ $t('cos_app_scorerequired') }}：<span class="color333">{{ my_state.passScore }}</span></span>
                  <span style="margin-left: 20px;">{{ $t('cos_total_score_course') }}：<span class="color333">{{ my_state.courseScore }}</span></span>
                </p>
                <div class="accTitle-right fontWeight600">
                  <span v-if="my_state.courseScore >= my_state.passScore" style="color:rgb(7, 94, 187)">{{$t('cos_app_satisfied')}}</span>
                  <span v-else style="color: #fb6d0e;">{{$t('cos_app_unsatisfied')}}</span>
                </div>
              </div>
            </van-col>
        </van-row>
      </div>
      <!-- 模块计分要求 -->
      <div>
        <p class="category fontWeight600">{{$t('Module_integration_requirements')}}</p>
        <van-row v-for="(item,index) in scoreRecordList" :key="index">
            <van-col span="24" class="detail-col">
              <div class="pd15">
                <p class="color333">{{item.resTitle}}</p>
                <div class="flex-between">
                  <div>
                    <p class="color333" style="padding-bottom:5px">{{item.score+$t('points')+'/'+item.moduleScore+$t('points')}}</p>
                    <p class="color999">{{$t('Module_scores')+'/'+$t('Module_score')}}</p>
                  </div>
                  <div>
                    <p class="color333" style="padding-bottom:5px">{{item.contrRate+'%'+'/'+item.actualScore+$t('points')}}</p>
                    <p class="color999">{{$t('proportion_of_the_module')+'/'+$t('Effective_fraction')}}</p>
                  </div>
                </div>
              </div>
            </van-col>
        </van-row>
        <div v-if="scoreRecordList && scoreRecordList.length === 0" class="describe">{{ $t('cos_app_noNeed') }}</div>
      </div>
      <!-- 计分规则 -->
      <div>
        <p class="category fontWeight600" @click="show = true">{{$t('The_scoring_rules')}}</p>
        <p class="describe">{{$t('calculated_by_the_following_rules')}}</p>
        <van-row>
            <van-col span="23">
              <div class="pd10">
                <p style="color:#333;font-size:18px;margin-bottom:10px">T=(S/M)*100*W%</p>
                <p style="color:#999999;font-size:12px">{{$t('explain')+':'}}<span style="margin-left:10px;margin-right:5px">{{$t('mod_instructions_4')}}</span><span style="margin-right:5px">{{$t('mod_instructions_5')}}</span><span style="margin-right:5px">{{$t('mod_instructions_2')}}</span>
                 <span>{{$t("mod_instructions_3")}}</span>
                </p>
              </div>
            </van-col>
        </van-row>
      </div>
    </div>
    <div>
    </div>
  </div>
</template>

<script>
import {Col, Row, Cascader, Popup} from 'vant';
export default {
    name: 'learningState',
    components: {
        vanCol: Col,
        vanRow: Row,
        vanCascader: Cascader,
        vanPopup: Popup
    },
    data() {
        return {
            show: false,
            fieldValue: '',
            itmId: '',
            tkhId: '',
            learning_state: [],
            scoreRecordList: [],
            learner_record: [],
            my_state: []
        };
    },
    methods: {
        getCourseScore() {
            this.$axios({
                methods: 'GET',
                url: '/app/api/trainee/course/score/record',
                params: {
                    itmId: this.itmId,
                    tkhId: this.tkhId
                }
            }).then(res => {
                this.learning_state = res.data;
                this.scoreRecordList = res.data.scoreRecordList;
            });
        },
        getCourseLearner() {
            this.$axios({
                methods: 'GET',
                url: '/app/api/trainee/course/learner/record',
                params: {
                    itmId: this.itmId,
                    tkhId: this.tkhId
                }
            }).then(res => {
                this.my_state = res.data;
                this.learner_record = res.data.moduleRecordList;
            });
        },
        goBack() {
            this.$router.go(-1);
        }
    },
    mounted() {
        this.itmId = this.$route.params.itmId;
        this.tkhId = this.$route.params.tkhId;
        this.getCourseScore();
        this.getCourseLearner();
    },
    created() {

    }
};
</script>

<style scoped lang="less">
  /deep/ .van-row--flex {
    flex-wrap: nowrap !important;
  }
  .category {
    padding:20px 0 0 0;
    margin-left:10px;
    font-size: 15px;
  }
  .describe {
    padding:5px 0 0 0;
    margin:5px 0 5px 10px;
    color:#999999;
    font-size:12px
  }
    .detail-col {
      background-color: #FAFAFA !important;
      border-radius: 5px;
      margin: 5px;
      width: 100%;
    }
      .pd8 {
        padding: 15px;
      }
      .pd10 {
        padding: 10px;
      }
      .pd15 {
        padding: 15px;
      }
        .flex-between {
          padding: 10px 0px;
          display: flex;
          justify-content: space-between;
        }
        .color333{
          color: #333;
        }
        .color999 {
          color: #999
        }
        .color666 {
          color: #666
        }
        .learn-status{
          p{}
          .accTitle-right{
            white-space: nowrap;
            margin-left: 15px;
          }
        }
        .fontWeight600{
          font-weight: 600;
        }
</style>
